{% extends "layout/base.html.twig" %}

{% block content %}
    <section id="register" class="d-flex align-items-center justify-content-center h-100">
        <form method="POST" hx-post="{{ uri('auth.register.post') }}" hx-swap="outerHTML" hx-target="#register" hx-select="#register">
            {{ csrf()|raw }}
            {% include "components/flash.html.twig" %}
            <div class="row">
                <div class="col-6">
                    <div class="form-floating mb-3">
                        <input type="input" class="form-control {% if validation_errors.first_name is defined %}is-invalid{% endif %}" id="first-name" name="first_name" placeholder="" autocomplete="given-name">
                        <label for="first-name">First name</label>
                        {% include 'components/validation.html.twig' with {'validate': 'first_name'} %}
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-floating mb-3">
                        <input type="input" class="form-control {% if validation_errors.surname is defined %}is-invalid{% endif %}" id="surname" name="surname" placeholder="" autocomplete="family-name">
                        <label for="first-name">Surname</label>
                        {% include 'components/validation.html.twig' with {'validate': 'surname'} %}
                    </div>
                </div>
            </div>
            <div class="form-floating mb-3">
                <input type="input" class="form-control {% if validation_errors.email is defined %}is-invalid{% endif %}" id="email" name="email" placeholder="" autocomplete="email">
                <label for="email">Email address</label>
                 {% include 'components/validation.html.twig' with {'validate': 'email'} %}
            </div>
            <div class="form-floating mb-3">
                <input type="password" class="form-control {% if validation_errors.password is defined %}is-invalid{% endif %}" id="password" name="password" placeholder="" autocomplete="current-password">
                <label for="password">Password</label>
                 {% include 'components/validation.html.twig' with {'validate': 'password'} %}
            </div>
            <div class="form-floating mb-3">
                <input type="password" class="form-control {% if validation_errors.password_match is defined %}is-invalid{% endif %}" id="password-match" name="password_match" placeholder="" autocomplete="current-password">
                <label for="password-match">Password (again)</label>
                 {% include 'components/validation.html.twig' with {'validate': 'password_match'} %}
            </div>
            <div class="mb-3">
                <p><small class="text-muted">By clicking Sign Up, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</small></p>
            </div>
            <div class="d-flex justify-content-center mb-3">
                <button type="submit" class="btn btn-success">Sign Up</button>
                <a hx-boost="true" class="btn btn-secondary ms-2" href="/sign-in" hx-swap="outerHTML" hx-select="#sign-in" hx-target="#register">Cancel</a>
            </div>
        </form>
    </section>
{% endblock %}
